<template>
  <div class="innerHome">
    <div class="head">
      <page-head></page-head>
    </div>
    <div class="left">
      <slide-bar :slideList=slideList></slide-bar>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
    <div class="cover" v-show="$store.state.ifShowCover" @click="closeCover"></div>
  </div>
</template>

<script>
import pageHead from './components/pageHead'
import slideBar from '../Home/components/slideBar'
export default {
  components: {
    pageHead,
    slideBar
  },
  created () {

  },
  methods: {
    closeCover () {
      this.$store.commit('set_ifShowCover', false)
    }
  },
  computed: {
    slideList () {
      // console.log(this.$store.state.permission.addRoutes[0])
      return this.$store.state.permission.addRoutes[0] && this.$store.state.permission.addRoutes[0].children
    }
  }
}
</script>

<style scoped lang="scss">
.innerHome {
  position: relative;
  width: 100%;
  height: 100%;
  .head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
  }
  .left {
    position: absolute;
    top: 64px;
    left: 0;
    height: calc(100% - 64px);
    width: 220px;
  }
  .right {
    position: absolute;
    top: 64px;
    right: 0px;
    height: calc(100% - 64px);
    width: calc(100% - 220px);
    background-color: #f2f2f2;
    color: #333;
    overflow: auto;
    &::-webkit-scrollbar {
    display: none;
}
  }
  .cover{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
